/**
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {Modal, Form, Input} from 'antd'

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
};

class AddOrderForm extends Component {
    static propTypes = {
        visible: PropTypes.bool.isRequired,
        okCb: PropTypes.func.isRequired,
        cancelCb: PropTypes.func.isRequired,
        title: PropTypes.string.isRequired,
        initForm: PropTypes.object.isRequired
    }
    componentWillReceiveProps(nextProps, nextContext) {
        if (nextProps.visible && !this.props.visible) {
            this.props.form.resetFields();
        }
    }
    handleOk = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.okCb(values)
            }
        });
    }


    render() {
        const {visible, cancelCb, title, initForm} = this.props
        const { getFieldDecorator } = this.props.form;

        return (
            <Modal
                title={title}
                visible={visible}
                onOk={this.handleOk}
                onCancel={cancelCb}
                okText={'确认'}
                cancelText={'取消'}
                >
                <Form {...formItemLayout}>
                    <Form.Item label={'卡单金额'}>
                        {getFieldDecorator('orderPrice', {
                            initialValue: initForm['orderPrice'] || '',
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'卡第几单'}>
                        {getFieldDecorator('orderNum', {
                            initialValue: initForm['orderNum'] || '',
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'倍数'}>
                        {getFieldDecorator('orderTimes', {
                            initialValue: initForm['orderTimes'] || '',
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        )
    }
}

export default Form.create()(AddOrderForm)
